<template>
  <div id="app">
    <el-row class="nav">
      <!-- 用ref来修改子元素type的时候vue不建议我直接修改dom-->
      <el-button :type="pagenum > -1 ? 'primary' : ''">前言</el-button>
      <el-button :type="pagenum > 0 ? 'primary' : ''">计划</el-button>
      <el-button :type="pagenum > 1 ? 'primary' : ''">1</el-button>
      <el-button :type="pagenum > 2 ? 'primary' : ''">2</el-button>
      <el-button :type="pagenum > 3 ? 'primary' : ''">3</el-button>
      <el-button :type="pagenum > 4 ? 'primary' : ''">4</el-button>
      <el-button :type="pagenum > 5 ? 'primary' : ''">5</el-button>
      <el-button :type="pagenum > 6 ? 'primary' : ''">6</el-button>
      <el-button :type="pagenum > 7 ? 'primary' : ''">7</el-button>
      <el-button :type="pagenum > 8 ? 'primary' : ''">8</el-button>
    </el-row>

    <!-- 按钮部分 -->
    <el-button-group class="pagebtn" v-if="pagenum == 1">
      <el-button type="primary" @click="nextpage()"
        >完成计划，开始解题</el-button
      >
    </el-button-group>
    <el-button-group class="pagebtn" v-if="pagenum > 1">
      <el-button
        type="primary"
        icon="el-icon-arrow-left"
        @click="backpage()"
        :disabled="pagenum > 9"
        >上一页</el-button
      >
      <el-button type="primary" @click="nextpage()" :disabled="pagenum > 9"
        >下一页<i class="el-icon-arrow-right el-icon--right"></i>
      </el-button>
    </el-button-group>
    <div class="cxt" v-if="pagenum == 0">
      <div class="horizontalline"></div>

      <div class="leftcxt">
        <div>
          <img
            src="./assets/img/1.png"
            alt=""
            style="height:400px;margin-left:60px;"
          />
        </div>
      </div>
      <div class="p0text">
        <p>
          在一部科幻电影中，一只正常的蚂蚁因为注射了某种药物变为一只体型巨大的蚂蚁。这只巨型蚂蚁的长度为8米，而一只正常蚂蚁的长度只有1厘米，宽度和高度只有0.25厘米。
        </p>
      </div>
      <div class="rightcxt">
        <el-row type="flex" justify="center">
          <el-col
            :span="20"
            style="margin-top:200px;height:130px;width:570px;"
            class="text"
          >
            <h3>
              请你来验证一下，现实中是否有可能存在这样的巨型蚂蚁吧！<br />
              【你可以通过点击、输入等方式来完成题目的作答】
            </h3>
            <br />
            <el-button
              type="primary"
              @click="nextpage()"
              class="fontsize30 bigbtn"
              style="margin:50px 160px;"
              >开始答题</el-button
            >
          </el-col>
        </el-row>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-show="pagenum == 1">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img
          src="./assets/img/1.png"
          alt=""
          style="height:400px;margin-left:60px;"
        />
      </div>
      <div class="p0text">
        <p>
          在一部科幻电影中，一只正常的蚂蚁因为注射了某种药物变为一只体型巨大的蚂蚁。这只巨型蚂蚁的长度为8米，而一只正常蚂蚁的长度只有1厘米，宽度和高度只有0.25厘米。
        </p>
      </div>
      <div class="rightcxt">
        <div class="title flexbox">
          <h2>
            计划
          </h2>
        </div>
        <div class="text flexbox">
          为了验证现实中是否有可能存在巨型蚂蚁，请你先计划一下解决问题的过程。<br />
          【点击下方每一步的下拉按钮，选择每一步要做的事情。完成后，请点击“完成计划，开始解题”。】
        </div>
        <div style="font-size:36px;margin:50px 200px;">
          我的顺序：
        </div>

        <div class="answerimg">
          <Drag></Drag>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 2">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img
          src="./assets/img/1.png"
          alt=""
          style="height:300px;margin-left:120px;"
        />
      </div>
      <div class="picture-buttom1">
        <p>
          在一部科幻电影中，一只正常的蚂蚁因为注射了某种药物变为一只体型巨大的蚂蚁。这只巨型蚂蚁的长度为8米，而一只正常蚂蚁的长度只有1厘米，宽度和高度只有0.25厘米。
        </p>
      </div>
      <div class="picture-buttom2">
        <p>
          科学研究显示：蚂蚁是通过身体表面来进行呼吸的。每秒钟一只蚂蚁每立方厘米身体消耗的氧气为m=24毫升，而每平方厘米外表皮可以吸收的氧气为n=6毫升。
        </p>
      </div>

      <div class="rightcxt">
        <div class="title flexbox"><h2>第1题【多选题】</h2></div>
        <div class="text flexbox">
          你查阅了科学研究的相关结果，收集了蚂蚁呼吸的相关数据信息。<br />
          为了简化这个问题，下列哪些选项是你解决问题所需要提出的假设？
        </div>
        <div class="optionbox">
          <el-checkbox-group
            v-model="$store.state.answer[1]"
            class="multiplechoice"
            @change="updata()"
          >
            <el-checkbox label="0"
              >A.假设所有蚂蚁单位外表皮吸收氧气的速度是相同的
            </el-checkbox>
            <el-checkbox label="1"
              >B.假设蚂蚁在不同环境下单位体积消耗氧气的速度不同
            </el-checkbox>
            <el-checkbox label="2"
              >C.假设巨型蚂蚁与正常蚂蚁的高度相同
            </el-checkbox>
            <el-checkbox label="3"
              >D.假设巨型蚂蚁与正常蚂蚁的形状相同
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>

      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 3">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img
          src="./assets/img/1.png"
          alt=""
          style="height:300px;margin-left:120px;"
        />
      </div>
      <div class="picture-buttom1">
        <p>
          在一部科幻电影中，一只正常的蚂蚁因为注射了某种药物变为一只体型巨大的蚂蚁。这只巨型蚂蚁的长度为8米，而一只正常蚂蚁的长度只有1厘米，宽度和高度只有0.25厘米。
        </p>
      </div>
      <div class="picture-buttom2">
        <p>
          科学研究显示：蚂蚁是通过身体表面来进行呼吸的。每秒钟一只蚂蚁每立方厘米身体消耗的氧气为m=24毫升，而每平方厘米外表皮可以吸收的氧气为n=6毫升。
        </p>
      </div>

      <div class="rightcxt">
        <div class="title flexbox"><h2>第2题【多选题】</h2></div>
        <div class="text flexbox" style="height:100px;">
          根据你集到的资料，为了验证现实中是否有可能存在巨型蚂蚁，你需要计算以下哪些数据？
        </div>
        <div class="optionbox">
          <el-checkbox-group
            v-model="$store.state.answer[2]"
            class="multiplechoice"
                        @change="updata()"
          >
            <el-checkbox label="0"
              >A.每秒钟一只巨型蚂蚁消耗的氧气量
            </el-checkbox>
            <el-checkbox label="1"
              >B.每秒钟一只正常蚂蚁消耗的氧气量</el-checkbox
            >
            <el-checkbox label="2"
              >C.每秒钟一只巨型蚂蚁吸收的氧气量
            </el-checkbox>
            <el-checkbox label="3"
              >D.每秒钟一只正常蚂蚁吸收的氧气量
            </el-checkbox>
            <el-checkbox label="4"> E.一只巨型蚂蚁的宽度（高度）</el-checkbox>
            <el-checkbox label="5">F.一只巨型蚂蚁的性别</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 4">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img
          src="./assets/img/1.png"
          alt=""
          style="height:300px;margin-left:120px;"
        />
      </div>
      <div class="picture-buttom1">
        <p>
          在一部科幻电影中，一只正常的蚂蚁因为注射了某种药物变为一只体型巨大的蚂蚁。这只巨型蚂蚁的长度为8米，而一只正常蚂蚁的长度只有1厘米，宽度和高度只有0.25厘米。
        </p>
      </div>
      <div class="picture-buttom2">
        <p>
          科学研究显示：蚂蚁是通过身体表面来进行呼吸的。每秒钟一只蚂蚁每立方厘米身体消耗的氧气为m=24毫升，而每平方厘米外表皮可以吸收的氧气为n=6毫升。
        </p>
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第3题【单选题】</h2></div>
        <div class="text flexbox" style="height:80px;">
          请根据收集到的资料，选出你认为最能够体现出巨型蚂蚁的模型图。
        </div>
        <div>
          <el-radio-group
            v-model="$store.state.answer[3]"
            class="multipleimgchoice"
                        @change="updata()"
          >
            <el-popover
              placement="left"
              width="500"
              trigger="hover"
              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
            >
              <img src="./assets/img/图片3-1.png" alt="" />
              <el-radio-button label="0" slot="reference">
                <img src="./assets/img/图片3-1.png" alt="" />
              </el-radio-button>
            </el-popover>
            <el-popover
              placement="left"
              width="200"
              trigger="hover"
              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
            >
              <img src="./assets/img/图片3-5.png" alt="" />
              <el-radio-button label="1" slot="reference">
                <img src="./assets/img/图片3-5.png" alt="" />
              </el-radio-button>
            </el-popover>
            <el-popover
              placement="left"
              width="500"
              trigger="hover"
              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
            >
              <img src="./assets/img/图片3-2.png" alt="" />
              <el-radio-button label="2" slot="reference">
                <img src="./assets/img/图片3-2.png" alt="" />
              </el-radio-button>
            </el-popover>
            <el-popover
              placement="left"
              width="250"
              trigger="hover"
              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
            >
              <img src="./assets/img/图片3-6.png" alt="" />
              <el-radio-button label="3" slot="reference">
                <img src="./assets/img/图片3-6.png" alt="" />
              </el-radio-button>
            </el-popover>
            <el-popover
              placement="left"
              width="500"
              trigger="hover"
              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
            >
              <img src="./assets/img/图片3-3.png" alt="" />
              <el-radio-button label="4" slot="reference">
                <img src="./assets/img/图片3-3.png" alt="" />
              </el-radio-button>
            </el-popover>
            <el-popover
              placement="left"
              width="500"
              trigger="hover"
              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
            >
              <img src="./assets/img/图片3-4.png" alt="" />
              <el-radio-button label="5" slot="reference">
                <img src="./assets/img/图片3-4.png" alt="" />
              </el-radio-button>
            </el-popover>
          </el-radio-group>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 5">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img src="./assets/img/1.png" alt="" style="height:250px" />
      </div>
      <div class="p4text1">
        <p>
          在一部科幻电影中，一只正常的蚂蚁因为注射了某种药物变为一只体型巨大的蚂蚁。这只巨型蚂蚁的长度为8米，而一只正常蚂蚁的长度只有1厘米，宽度和高度只有0.25厘米。
        </p>
      </div>
      <div class="p4text2">
        <p>
          科学研究显示：蚂蚁是通过身体表面来进行呼吸的。每秒钟一只蚂蚁每立方厘米身体消耗的氧气为m=24毫升，而每平方厘米外表皮可以吸收的氧气为n=6毫升。
        </p>
      </div>
      <div class="imgchoosebox">
        你选择的巨型蚂蚁模型图
        <div>
          <img :src="imgchoose" alt="" />
        </div>
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第4题【填空题】</h2></div>
        <div class="text flexbox" style="height:300px;margin:0px;">
          <p>
            这里改为： 根据你选择的巨型蚂蚁模型图，请你用一个<b
              class="bigtext"
              >含字母的表达式（用a、b、h、r、m、n等字母代替数据列出表达式）</b
            >来表示出：<br />
            （1）每秒钟一只巨型蚂蚁消耗的氧气量<br />
            （2）每秒钟一只巨型蚂蚁吸收的氧气量<br />
            例如：每秒钟一只边长a=200厘米的正方体巨型蚂蚁消耗的氧气量=a╳a╳a╳M（毫升）<br />
            注：圆周率取3即可。
          </p>
        </div>

        <div class="flexbox">
          <Computer1 />
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 6">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img src="./assets/img/1.png" alt="" style="height:250px" />
      </div>
      <div class="p4text1">
        <p>
          在一部科幻电影中，一只正常的蚂蚁因为注射了某种药物变为一只体型巨大的蚂蚁。这只巨型蚂蚁的长度为8米，而一只正常蚂蚁的长度只有1厘米，宽度和高度只有0.25厘米。
        </p>
      </div>
      <div class="p4text2">
        <p>
          科学研究显示：蚂蚁是通过身体表面来进行呼吸的。每秒钟一只蚂蚁每立方厘米身体消耗的氧气为m=24毫升，而每平方厘米外表皮可以吸收的氧气为n=6毫升。
        </p>
      </div>
      <div class="imgchoosebox">
        你选择的巨型蚂蚁模型图
        <div>
          <img :src="imgchoose" alt="" />
        </div>
      </div>
      <div class="p5expression">
        你的表达式
        <p class="p5expressionbox">
          每秒钟一只巨型蚂蚁消耗氧气量={{ $store.state.answer[4] }}（毫升）
        </p>
        <p class="p5expressionbox">
          每秒钟一只巨型蚂蚁吸收氧气量={{ $store.state.answer[5] }}（毫升）
        </p>
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第5题【填空题】</h2></div>
        <div class="text flexbox" style="height:100px">
          请根据你列出的字母表达式，计算每秒钟一只巨型蚂蚁消耗的氧气量，将结果输入到下面的作答框中吧！<br />
          注：如结果为无限小数，仅保留一位小数。
        </div>
        <div class="flexbox">
          <Computer2 />
        </div>
      </div>
      <div class="verticalline"></div>
    </div>

    <div class="cxt" v-if="pagenum == 7">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img src="./assets/img/1.png" alt="" style="height:250px" />
      </div>
      <div class="p4text1">
        <p>
          在一部科幻电影中，一只正常的蚂蚁因为注射了某种药物变为一只体型巨大的蚂蚁。这只巨型蚂蚁的长度为8米，而一只正常蚂蚁的长度只有1厘米，宽度和高度只有0.25厘米。
        </p>
      </div>
      <div class="p4text2">
        <p>
          科学研究显示：蚂蚁是通过身体表面来进行呼吸的。每秒钟一只蚂蚁每立方厘米身体消耗的氧气为m=24毫升，而每平方厘米外表皮可以吸收的氧气为n=6毫升。
        </p>
      </div>
      <div class="imgchoosebox">
        你选择的巨型蚂蚁模型图
        <div>
          <img :src="imgchoose" alt="" />
        </div>
      </div>
      <div class="p5expression">
        你的表达式
        <p class="p5expressionbox">
          每秒钟一只巨型蚂蚁消耗氧气量={{ $store.state.answer[4] }}（毫升）
        </p>
        <p class="p5expressionbox">
          每秒钟一只巨型蚂蚁吸收氧气量={{ $store.state.answer[5] }}（毫升）
        </p>
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第6题【填空题】</h2></div>
        <div class="text flexbox" style="height:100px;">
          请根据你列出的字母表达式，计算一下每秒钟一只巨型蚂蚁吸收的氧气量，将结果输入到下面的作答框中吧！<br />
          注：如结果为无限小数，仅保留一位小数。
        </div>
        <div class="flexbox">
          <Computer3 />
        </div>
      </div>
      <div class="verticalline"></div>
    </div>

    <div class="cxt" v-if="pagenum == 8">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img src="./assets/img/1.png" alt="" style="height:250px" />
      </div>
      <div class="p4text1">
        <p>
          在一部科幻电影中，一只正常的蚂蚁因为注射了某种药物变为一只体型巨大的蚂蚁。这只巨型蚂蚁的长度为8米，而一只正常蚂蚁的长度只有1厘米，宽度和高度只有0.25厘米。
        </p>
      </div>
      <div class="p4text2">
        <p>
          科学研究显示：蚂蚁是通过身体表面来进行呼吸的。每秒钟一只蚂蚁每立方厘米身体消耗的氧气为m=24毫升，而每平方厘米外表皮可以吸收的氧气为n=6毫升。
        </p>
      </div>
      <div class="imgchoosebox">
        你选择的巨型蚂蚁模型图
        <div>
          <img :src="imgchoose" alt="" />
        </div>
      </div>
      <div class="p5expression">
        你计算的结果
        <p class="p5expressionbox">
      每秒钟一只巨型蚂蚁消耗氧气量={{ $store.state.answer[6] }}（毫升）
        </p>
        <p class="p5expressionbox">
         每秒钟一只巨型蚂蚁吸收氧气量={{ $store.state.answer[8] }}（毫升）
        </p>
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>验证</h2></div>
        <div class="text flexbox" style="height:100px;">
          请你根据计算的结果，判断现实中是否有可能存在巨型蚂蚁并简单说明你的理由。
        </div>
        <div class="optionbox" style="display:block;">
          <el-radio v-model="$store.state.answer[10]" label="0"             @change="updata()">
            <b style="color:black">我认为巨型蚂蚁可能存在</b> </el-radio
          ><br />
          <el-radio v-model="$store.state.answer[10]" label="1"             @change="updata()"
            ><b style="color:black">我认为巨型蚂蚁不可能存在</b> </el-radio
          ><br />
          <el-radio v-model="$store.state.answer[10]" label="2"             @change="updata()"
            ><b style="color:black">我认为巨型蚂蚁是否存在无法判断</b>
          </el-radio>
          <div style="margin:10px 0px 0px 0px;font-size:30px">
            我的理由是：
          </div>
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="$store.state.answer[11]"
            style="font-size:20px"
                        @input="updata()"
          >
          </el-input>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 9">
      <div class="horizontalline"></div>
      <div class="leftcxt">
        <img src="./assets/img/1.png" alt="" style="height:250px" />
      </div>
      <div class="p4text1">
        <p>
          在一部科幻电影中，一只正常的蚂蚁因为注射了某种药物变为一只体型巨大的蚂蚁。这只巨型蚂蚁的长度为8米，而一只正常蚂蚁的长度只有1厘米，宽度和高度只有0.25厘米。
        </p>
      </div>
      <div class="p4text2">
        <p>
          科学研究显示：蚂蚁是通过身体表面来进行呼吸的。每秒钟一只蚂蚁每立方厘米身体消耗的氧气为m=24毫升，而每平方厘米外表皮可以吸收的氧气为n=6毫升。
        </p>
      </div>
      <div class="imgchoosebox">
        你选择的巨型蚂蚁模型图
        <div>
          <img :src="imgchoose" alt="" />
        </div>
      </div>
      <div class="p5expression">
        你计算的结果
        <p class="p5expressionbox">
      每秒钟一只巨型蚂蚁消耗氧气量={{ $store.state.answer[6] }}（毫升）
        </p>
        <p class="p5expressionbox">
         每秒钟一只巨型蚂蚁吸收氧气量={{ $store.state.answer[8] }}（毫升）
        </p>
      </div>
      <div class="rightcxt">
        <div class="title flexbox"><h2>第8题【单选题】</h2></div>
        <div class="text flexbox">
          如果只有巨型蚂蚁的形状发生改变，其他条件不变，你认为只需要计算下列哪个数据就可以判断巨型蚂蚁是否可能存在。
        </div>
        <div class="optionbox">
          <el-radio
            v-model="$store.state.answer[12]"
            label="0"
            @change="
              () => {
                ifp8input = false;
                this.updata()
              }
            "
          >
            A. 巨型蚂蚁的体积与表面积之和</el-radio
          ><br />
          <el-radio
            v-model="$store.state.answer[12]"
            label="1"
            @change="
              () => {
                ifp8input = false;
                this.updata()
              }
            "
            >B. 巨型蚂蚁的体积与表面积之比</el-radio
          ><br />
          <el-radio
            v-model="$store.state.answer[12]"
            label="2"
            @change="
              () => {
                ifp8input = false;
                this.updata()
              }
            "
            >C. 巨型蚂蚁的长、宽、高之和</el-radio
          ><br />
          <el-radio
            v-model="$store.state.answer[12]"
            label="3"
            @change="
              () => {
                ifp8input = false;
                this.updata()
              }
            "
          >
            D. 巨型蚂蚁的长和宽之比
          </el-radio>
        </div>
      </div>
      <div class="verticalline"></div>
    </div>
    <div class="cxt" v-if="pagenum == 10">
      <div class="horizontalline"></div>

      <div class="leftcxt">
        <div>
          <img
            src="./assets/img/1.png"
            alt=""
            style="height:400px;margin:200px 60px;"
          />
        </div>
      </div>
      <div class="rightcxt">
        <el-row type="flex" justify="center">
          <el-col
            :span="20"
            style="margin-top:200px;height:100px;width:570px;"
            class="size"
          >
            <h3>
              你好棒！用数学的方法验证了电影中巨型蚂蚁在现实生活中是否有可能存在。
            </h3>
            <br />
            <div class="fontsize30 lastbtn">
              请先点击下方的【提交答案】，再点击【进入下一题】。
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="verticalline"></div>
    </div>
  </div>
</template>

<script>
import Drag from "./components/Drag";
import Computer1 from "./components/Computer1";
import Computer2 from "./components/Computer2";
import Computer3 from "./components/Computer3";
export default {
  name: "App",
  components: {
    Drag,
    Computer1,
    Computer2,
    Computer3,
  },
  data() {
    return {
      ifp8input: false,
      p8text: "",
      pagenum: 0, //页数
    };
  },
  computed: {
    imgchoose() {
      let list = [
        require("./assets/img/图片3-1.png"),
        require("./assets/img/图片3-5.png"),
        require("./assets/img/图片3-2.png"),
        require("./assets/img/图片3-6.png"),
        require("./assets/img/图片3-3.png"),
        require("./assets/img/图片3-4.png"),
      ];
      return list[this.$store.state.answer[3]];
    },
  },
  methods: {
    updata() {
      this.$store.state.pagenum=this.pagenum
      console.log(this.$store.state.pagenum, this.$store.state.answer);
      parent.postMessage(this.$store.state, "*");
    },
    nextpage() {
      this.pagenum += 1;
      //提示判断
      if (
        this.pagenum === 2 &&
        (this.$store.state.answer[0][0] == "-1" ||
          this.$store.state.answer[0][1] == "-1" ||
          this.$store.state.answer[0][2] == "-1" ||
          this.$store.state.answer[0][3] == "-1")
      ) {
        this.nextopen();
      } else if (this.pagenum == 3 && this.$store.state.answer[1] == "") {
        this.nextopen();
      } else if (this.pagenum == 4 && this.$store.state.answer[2] == "") {
        this.nextopen();
      } else if (this.pagenum == 5 && this.$store.state.answer[3] == "-1") {
        this.nextopen();
      } else if (
        this.pagenum == 6 &&
        (this.$store.state.answer[4] == "" || this.$store.state.answer[5] == "")
      ) {
        this.nextopen();
      } else if (this.pagenum == 7 && this.$store.state.answer[6] == "") {
        this.nextopen();
      } else if (this.pagenum == 8 && this.$store.state.answer[8] == "") {
        this.nextopen();
      } else if (
        this.pagenum == 9 &&
        (this.$store.state.answer[10] == "-1" ||
          this.$store.state.answer[11] == "")
      ) {
        this.nextopen();
      } else if (this.pagenum == 10) {
        if (this.$store.state.answer[12] == "-1") {
          this.nextopen();
        } else {
          this.pagenum -= 1;
          this.notarizeopen();
        }
      }
      this.updata();
    },
    nextopen() {
      this.pagenum -= 1;
      this.$alert("这个问题你还没做完，请作答后再进入下一页吧！", "提示", {
        confirmButtonText: "确定",
      });
    },
    backpage() {
      this.pagenum -= 1;
      console.log(this.pagenum, this.$store.state.answer);
    },
    hintopen() {
      this.$alert(
        "你可以首先点击其中一个输入框，然后点击屏幕上键盘的数字、字母和运算符号来进行输入，点击“删除”即可向前删除一个字母（数字或运算符号）。 ",
        "提示信息",
        {
          confirmButtonText: "返回题目",
        }
      );
    },
    notarizeopen() {
      this.$confirm(
        "即将提交全部答案，确认无误请点击“提交全部答案”。",
        "提示",
        {
          confirmButtonText: "提交全部答案",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.pagenum += 1;
          this.$message({
            type: "success",
            message: "提交全部答案!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消",
          });
        });
    },
  },
};
</script>

<style scope>
#app {
  width: 1200px;
  height: 800px;
  font-size: 20px;
  font-weight: 1000;
  line-height: 36px;
}
.lastbtn {
  width: 500px;
  height: 80px;
  padding: 30px;
  font-size: 36px;
  position: absolute;
  top: 360px;
  left: 10px;
  font-family: "楷体";
  background-color: #f5f7ae;
}
.bg-purple {
  width: 100px;
  height: 60px;
  background: #d3dce6;
}
.el-checkbox,
.el-checkbox__input {
  position: relative;
  white-space: nowrap;
}
.multiselect label {
  width: 250px;
  height: 60px;
  line-height: 60px;
  border: 3px solid #000;
  background-color: transparent;
}
.multiselect .el-checkbox__label {
  font-size: 18px;
  font-weight: 1000;
}
.expressionbox {
  width: 500px;
  height: 100px;
  overflow: auto;
  background-color: #ecf5ff;
  border-color: #d9ecff;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
}
.p8optionchoose label {
  display: inline;
}
.p8optionchoose .el-radio__label {
  font-size: 20px !important;
  margin-top: 10px;
}
.p8optionchoose > div {
  width: 550px;
  height: 80px;
  margin: 10px;
  padding-top: 20px;
  background-color: #99cc99;
  font-size: 20px !important;
}
.p3info {
  float: left;
  width: 300px;
}
.multiplechoice label {
  margin: 0px;
}
.multiplechoice .el-checkbox__input {
  position: absolute;
  top: 2px;
  left: -15px;
}
.multipleimgchoice {
  width: 700px;
  position: absolute;
  top: 100px;
  left: -100px;
}
.multipleimgchoice img {
  max-width: 120px;
}
.multipleimgchoice .el-radio-button__inner {
  border: none;
}
.multipleimgchoice label {
  width: 200px;
  height: 60px;
  margin: 20px;
  margin-left: 120px;
  background-color: transparent;
}
.imgchoosebox {
  position: absolute;
  width: 555px;
  height: 180px;
  top: 480px;
  left: 10px;
  padding: 0px 10px;
  border: 3px solid #000;
  background-color: #409eff;
}
.imgchoosebox div{
  display: flex;
  justify-content: center;
}
.p5img1 {
  position: absolute;
  top: -60px;
  left: 40px;
  height: 130px;
}
.p5img2 {
  position: absolute;
  bottom: -20px;
  left: 280px;
  height: 170px;
}
.p5imgchoosebox {
  padding: 5px;
  position: absolute;
  top: 450px;
  left: 10px;
  background-color: #409eff;
}
.p5expression {
  padding: 5px;
  width: 565px;
  position: absolute;
  top: 700px;
  left: 10px;
  border: 3px solid #000;
  background-color: #409eff;
}
.p8input input {
  position: absolute;
  top: -30px;
  left: 0px;
  width: 400px;
}
.p4text1 {
  width: 280px;
  height: 250px;
  font-size: 20px;
  font-weight: 500;
  padding: 0px 10px;
  background-color: #f5f7ae;
  position: absolute;
  top: 80px;
  left: 290px;
}
.p4text2 {
  width: 560px;
  height: 100px;
  padding: 10px;
  font-size: 22px;
  font-weight: 500;
  background-color: #ff9900;
  position: absolute;
  top: 330px;
  left: 10px;
}
.el-popover,
.el-radio-button:first-child:last-child .el-radio-button__inner {
  border: 1px solid #000;
  margin: 100px 10px;
}
.bigtext {
  font-size: 30px;
  color: rgb(255, 0, 0);
}
.p0text {
  width: 560px;
  height: 300px;
  padding: 20px;
  font-size: 36px;
  line-height: 50px;
  background-color: #f5f7ae;
  position: absolute;
  top: 500px;
  left: 0px;
}
</style>
